<template>
  <t-space direction="vertical">
    <h3>尝试使用table展开更多</h3>
    <t-table
        :data="tableList"
        :columns="columns"
        cell-empty-content="-"
        resizable lazy-load
        table-layout="auto"
        stripe
        :expanded-row-keys="expandedRowKeys"
        @expand-change="rehandleExpandChange"
        :loading="fetchLoadingStatus">
      <template #expandedRow="{ row, rowIndex }">
        <t-row :gutter="16">
          <t-col :span="6">
            <div>
              地区：
              {{ row.applier_full_name }}
            </div>
          </t-col>
          <t-col :span="6">
            <div>
              大厦：
              {{ row.data_desc }}
            </div>
          </t-col>
        </t-row>
      </template>
    </t-table>
  </t-space>

</template>
<script lang="ts" setup>
import { ref, watch, computed,onMounted } from 'vue';
const fetchLoadingStatus = ref(false)
let tableList = ref([
  {
    "id": 1,
    "applier": "karlmfan",
    "applier_full_name": "karlmfan(范铭)",
    "data_range": [
      "访客"
    ],
    "data_time": [
      "2023-11-06",
      "2023-11-06"
    ],
    "data_file": [
      "无效CashRegister存档.xlsx"
    ],
    "temp_base64": [],
    "data_desc": "test",
    "download_file": "",
    "status": 4,
    "order_no": "83365731-6053-4cb5-8349-c159b1039c76",
    "create_time": "2023-10-18"
  },
  {
    "id": 2,
    "applier": "karlmfan",
    "applier_full_name": "karlmfan(范铭)",
    "data_range": [
      "会议室",
      "餐饮"
    ],
    "data_time": [
      "2023-10-18",
      "2023-11-19"
    ],
    "data_file": [
      "微卡商户树_20230927.xlsx"
    ],
    "temp_base64": [],
    "data_desc": "内部审核",
    "download_file": "",
    "status": 5,
    "order_no": "5b033557-fae5-4d7a-9f4a-474db3de6453",
    "create_time": "2023-10-18"
  }
])
const columns = ref([
  // { colKey: 'order_no', title: '订单号', width: "150px" },
  { colKey: 'applier_full_name', title: '申请人' },
  { colKey: 'data_range', title: '数据范围', },
  { colKey: 'data_time', title: '时间范围' },
  { colKey: 'status', title: '状态' },
  { colKey: 'create_time', title: '申请时间' },
  // { colKey: 'data_desc', title: '申请说明' },
  { colKey: 'operate', title: '操作' },
]);

onMounted(() => {
})

const expandedRowKeys = ref<Array<string | number>>([]);
const rehandleExpandChange = (value: Array<string | number>, params) => {
  expandedRowKeys.value = value;
};



</script>normal_table.vue